<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>身份信息填写</title>
    <style>
        html, body {
            height: 100%;
            background: #fff;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            color: #333;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            width: 100vw;
        }
        .outer {
            min-height: 100vh;
            width: 100vw;
            background: #fff;
            display: block;
        }
        .card {
            background: #fff;
            width: 100vw;
            min-height: 100vh;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0;
        }
        .steps-container {
            display: flex;
            justify-content: center;
            margin: 0 auto 30px auto;
            position: relative;
            width: 100%;
            max-width: 320px;
            height: 60px;
        }
        .step-line {
            position: absolute;
            top: 28px;
            left: 15%;
            right: 15%;
            height: 4px;
            background-color: #EEEEEE;
            border-radius: 2px;
            z-index: 1;
        }
        .step {
            width: 50%;
            text-align: center;
            position: relative;
            z-index: 2;
        }
        .step-number {
            width: 44px;
            height: 44px;
            line-height: 44px;
            border-radius: 50%;
            margin: 0 auto 6px;
            font-weight: bold;
            font-size: 20px;
            box-shadow: none;
        }
        .step-active .step-number {
            background-color: #4074f7;
            color: white;
        }
        .step-inactive .step-number {
            background-color: #EEEEEE;
            color: #999;
        }
        .step-text {
            font-size: 15px;
            color: #999;
        }
        .step-active .step-text {
            color: #333;
            font-weight: 500;
        }
        .main-title {
            font-size: 24px;
            margin: 24px 0 10px 0;
            font-weight: 400;
            text-align: center;
            letter-spacing: 1px;
        }
        .description {
            font-size: 17px;
            color: #333;
            margin-bottom: 32px;
            margin-top: 10px;
            text-align: center;
            line-height: 1.6;
        }
        .form-group {
            margin-bottom: 32px;
            width: 100%;
        }
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 15px;
            color: #666;
            font-weight: 400;
        }
        .form-input {
            width: 100%;
            padding: 14px 12px;
            border: 1px solid #e5e6eb;
            border-radius: 0;
            font-size: 17px;
            background: #fafbfc;
            color: #333;
            outline: none;
            box-sizing: border-box;
            transition: border 0.2s, background 0.2s;
        }
        .form-input:focus {
            border-color: #4074f7;
            background: #fff;
        }
        .btn-submit {
            display: block;
            width: 90%;
            height: 52px;
            background: linear-gradient(135deg, #4074f7, #5a8cff);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 17px;
            font-weight: 600;
            margin: 50px auto 20px auto;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(64, 116, 247, 0.3);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .btn-submit:disabled {
            background: linear-gradient(135deg, #6b8cff, #7a9cff);
            cursor: not-allowed;
            opacity: 0.8;
        }
        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(64, 116, 247, 0.4);
        }
        .btn-submit:active {
            transform: translateY(0);
        }
        @media (max-width: 480px) {
            .card {
                max-width: 100vw;
                padding: 18px 4vw 24px 4vw;
            }
            .steps-container {
                max-width: 100vw;
            }
        }
        form {
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <div class="outer">
      <div class="card">
        <!-- 步骤指引 -->
        <div class="steps-container">
            <div class="step-line"></div>
            <div class="step step-active">
                <div class="step-number">1</div>
                <div class="step-text">填写信息</div>
            </div>
            <div class="step step-inactive">
                <div class="step-number">2</div>
                <div class="step-text">刷脸认证</div>
            </div>
        </div>

        <!-- 主标题 -->
        <h1 class="main-title">您即将进行核身验证</h1>
        
        <!-- 说明文字 -->
        <p class="description">为了您顺利地通过认证，请填写真实的身份信息</p>

        <!-- 错误信息显示 -->
        <div th:if="${errorMessage}" style="width:85%; margin:0 auto 20px auto; padding:12px; background:#ffebee; color:#d32f2f; border-radius:0px; font-size:15px; text-align:center;">
            <span th:text="${errorMessage}"></span>
        </div>

        <!-- 成功信息显示 -->
        <div th:if="${successMessage}" style="width:85%; margin:0 auto 20px auto; padding:12px; background:#e8f5e9; color:#2e7d32; border-radius:0px; font-size:15px; text-align:center;">
            <span th:text="${successMessage}"></span>
        </div>

        <div id="pc-tips" style="display:none; text-align:center; margin-top:40px;">
            <p style="font-size:18px; color:#333;">请用手机扫码访问本页面</p>
            <canvas id="qrcode"></canvas>
        </div>

        <form action="/h5demo/real-person/submit" method="post" autocomplete="off" style="width:100%">
            <!-- 添加CSRF令牌和防重复提交隐藏字段 -->
            <input type="hidden" name="_csrf" th:value="${_csrf != null ? _csrf.token : ''}" />
            <input type="hidden" name="formToken" th:value="${formToken}" />
            
            <div class="form-group">
                <label class="form-label" for="name">姓名</label>
                <input class="form-input" type="text" id="name" name="name" placeholder="请输入您的真实姓名" required autocomplete="off">
            </div>
            
            <div class="form-group">
                <label class="form-label" for="idNumber">身份证号码</label>
                <input class="form-input" type="text" id="idNumber" name="idNumber" placeholder="请输入18位身份证号码" required
                       pattern="[0-9Xx]{18}" title="请输入正确的18位身份证号码" autocomplete="off">
            </div>
            
            <button type="submit" class="btn-submit">下一步</button>
        </form>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"></script>
    <script>
    function isMobile() {
        var ua = navigator.userAgent;
        return /Android|webOS|iPhone|iPod|BlackBerry|iPad|Windows Phone|Mobile/i.test(ua);
    }
    
    // 防止表单重复提交
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form');
        form.addEventListener('submit', function(e) {
            // 禁用提交按钮
            const submitBtn = document.querySelector('.btn-submit');
            submitBtn.disabled = true;
            submitBtn.textContent = '提交中...';
            submitBtn.style.backgroundColor = '#999';
            
            // 如果5秒内没有响应，重新启用按钮（保障用户体验）
            setTimeout(function() {
                submitBtn.disabled = false;
                submitBtn.textContent = '下一步';
                submitBtn.style.backgroundColor = '#366FFF';
            }, 5000);
        });
    });
    
    window.onload = function() {
        if (!isMobile()) {
            document.querySelector('form').style.display = 'none';
            document.querySelector('.steps-container').style.display = 'none';
            document.getElementById('pc-tips').style.display = 'block';
            var qr = new QRious({
                element: document.getElementById('qrcode'),
                value: window.location.href,
                size: 200
            });
        }
    };
    </script>
</body>
</html> 